<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
        <view class="after-navber">
            <view class="top-bar">
                <scroll-view :scrollIntoView="'miaosha_'+data.top_bar_scroll" scrollWithAnimation="true" scrollX="true">
                    <view class="flex-row start-time-list">
                        <view @tap="topBarItemClick" :class="['flex-grow-0 flex-y-center start-time-item', item.active?'active':'']" :data-index="index" :id="'miaosha_'+index" v-for="(item,index) in data.time_list" :key="item.id">
                            <view>
                                <view class="start-time">{{item.title}}</view>
                                <view class="start-status">{{item.status_text}}</view>
                            </view>
                            <view class="start-time-item-icon" v-if="item.active"></view>
                        </view>
                        <view @tap="miaosha_next" :class="['flex-grow-0 flex-y-center start-time-item', data.ms_active?'active':'']" v-if="data.next_list.length>0">
                            <view class="start-time">预告</view>
                            <view class="start-time-item-icon" v-if="data.ms_active"></view>
                        </view>
                        <view class="flex-grow-1" style="background:#30353c"></view>
                    </view>
                </scroll-view>
                <view class="flex-row" style="margin-top:-20upx;background:#fff" v-if="data.ms_active">
                    <view class="flex-y-center" style="margin:40upx 40upx 40upx 70upx">
                        <image src="/static/images/pages/miaosha-next.png" style="width:100upx;height:100upx"></image>
                    </view>
                    <view class="flex-col flex-x-center">
                        <text style="color:#3f3f3f">今天已无更多场次</text>
                        <text style="height:10upx"></text>
                        <text style="color:#999999">下一场于 <text style="color:#ff4544;">{{data.next_time}}</text> 开始</text>
                    </view>
                </view>
                <view style="background:#f7f7f7;height:12upx" v-if="data.ms_active"></view>
                <view class="flex-row time-over-bar" v-if="data.time_list&&!data.ms_active">
                    <view class="flex-grow-1 flex-y-center" style="color: #ff4544">限时限量 先到先得</view>
                    <view class="flex-grow-0 flex-y-center" style="color: #888" v-if="item.active" v-for="(item,index) in data.time_list" :key="item.id">
                        <text v-if="item.status==0">本场秒杀已结束</text>
                        <block v-if="item.status==1">
                            <text>距离本场结束</text>
                            <text style="color: #666;margin-left: 10upx">{{item.end_time_over}}</text>
                        </block>
                        <block v-if="item.status==2">
                            <text>距离本场开始</text>
                            <text style="color: #666;margin-left: 10upx">{{item.begin_time_over}}</text>
                        </block>
                    </view>
                </view>
            </view>
            <view class="goods-loading" style="padding-top: 320upx;text-align: center" v-if="data.goods_list===null">
                <image :src="data.__wxapp_img.system.loading2.url" style="width: 120upx;height: 120upx"></image>
            </view>
            <view class="goods-list" :style="data.ms_active?'padding-top:309upx':''" v-else>
                <form @submit="_formIdSubmit" data-type="navigate" :data-url="'/pages/miaosha/details/details?id='+item.id" reportSubmit="true" v-for="(item,index) in data.goods_list" :key="item.id">
                    <button formType="submit" id="_formIdSubmit" class="_formIdSubmit">
                        <view class="item flex-row">
                            <view class="flex-grow-0" style="padding: 12upx 0">
                                <image class="cover-pic" mode="aspectFill" :src="item.cover_pic"></image>
                            </view>
                            <view class="flex-grow-1" style="padding: 28upx 24upx">
                                <view class="goods-name">{{item.name}}</view>
                                <view class="progress-bar">
                                    <view class="progress" :style="{width: (item.sell_num*100/item.miaosha_num)+'%'}"></view>
                                </view>
                                <view class="flex-row statue-text">
                                    <block v-if="item.sell_num<item.miaosha_num">
                                        <view class="flex-grow-1">已抢购{{item.sell_num}}</view>
                                        <view class="flex-grow-0" style="color: #ff4544">仅剩{{item.miaosha_num-item.sell_num}}</view>
                                    </block>
                                    <view class="flex-grow-1" v-else>{{item.miaosha_num}}已抢完</view>
                                </view>
                                <view class="flex-row">
                                    <view class="flex-grow-1">
                                        <view class="miaosha-price">￥{{item.miaosha_price}}</view>
                                        <view class="price">￥{{item.price}}</view>
                                    </view>
                                    <view class="flex-grow-0 flex-y-bottom">
                                        <view class="btn" v-if="item.status==0">查看商品</view>
                                        <block v-if="item.status==1">
                                            <view class="btn btn-buy" v-if="item.sell_num<item.miaosha_num">马上抢购</view>
                                            <view class="btn" v-else>查看商品</view>
                                        </block>
                                        <view class="btn" v-if="item.status==2">查看商品</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </button>
                </form>
            </view>
            <view :class="['load-more-bar', data.loading_more?'active':'']">
                <image :src="data.__wxapp_img.system.loading.url"></image>
            </view>
        </view>
    </view>
		<comp-quick-navigation v-bind="{data:data}" @cutover="cutover" @map_power="map_power" @to_dial="to_dial" @openWxapp="openWxapp"></comp-quick-navigation>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	function t(t) {
    if (t < 60) return "00:00:" + ((e = t) < 10 ? "0" + e : e);
    if (t < 3600) {
        e = t % 60;
        return "00:" + ((i = parseInt(t / 60)) < 10 ? "0" + i : i) + ":" + (e < 10 ? "0" + e : e);
    }
    if (t >= 3600) {
        var a = parseInt(t / 3600), i = parseInt(t % 3600 / 60), e = t % 60;
        return (a < 10 ? "0" + a : a) + ":" + (i < 10 ? "0" + i : i) + ":" + (e < 10 ? "0" + e : e);
    }
}
	export default {
		data() {
			return {
				data: {
        time_list: null,
        goods_list: null,
        page: 1,
        loading_more: !1,
        status: !0,
				next_list: []
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t), this.loadData(t);
    },
		onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this);
        var a = this;
        -1 != a.data.page && a.loadGoodsList(!0);
    },
    onShareAppMessage: function() {
        return myVue.getApp.page.onShareAppMessage(this), {
            path: "/pages/miaosha/pages/miaosha?user_id=" + this.data.__user_info.id,
            success: function(t) {}
        };
    },
		methods: {
			quickNavigation: function() {
        this.setData({
            quick_icon: !this.data.quick_icon
        });
        this.data.dapp;
				//#ifndef H5
        var t = myVue.getApp.core.createAnimation({
            duration: 300,
            timingFunction: "ease-out"
        });
        this.data.quick_icon ? t.opacity(0).step() : t.translateY(-55).opacity(1).step(), 
        this.setData({
            animationPlus: t.export()
        });
				//#endif
    },
    loadData: function(t) {
        var a = this;
        myVue.getApp.request({
            url: myVue.getApp.api.miaosha.list,
            success: function(t) {
                if (0 == t.code) if (0 == t.data.list.length) {
                    if (0 == t.data.next_list.length) return void a.getApp.core.showModal({
                        content: "暂无秒杀活动",
                        showCancel: !1,
                        confirmText: "返回首页",
                        success: function(t) {
                            t.confirm && a.getApp.core.navigateBack({
                                url: "/pages/index/index"
                            });
                        }
                    });
                    a.setData({
                        goods_list: t.data.next_list.list,
                        ms_active: !0,
                        time_list: t.data.list,
                        next_list: t.data.next_list.list,
                        next_time: t.data.next_list.time
                    });
                } else a.setData({
                    time_list: t.data.list,
                    next_list: "" == t.data.next_list ? [] : t.data.next_list.list,
                    next_time: "" == t.data.next_list ? [] : t.data.next_list.time,
                    ms_active: !1
                }), a.topBarScrollCenter(), a.setTimeOver(), a.loadGoodsList(!1);
                1 == t.code && myVue.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    success: function() {
                        a.getApp.core.navigateBack({
                            url: "/pages/index/index"
                        });
                    },
                    showCancel: !1
                });
            }
        });
    },
    setTimeOver: function() {
        function a() {
            for (var a in i.data.time_list) {
                var e = i.data.time_list[a].begin_time - i.data.time_list[a].now_time, s = i.data.time_list[a].end_time - i.data.time_list[a].now_time;
                e = e > 0 ? e : 0, s = s > 0 ? s : 0, i.data.time_list[a].begin_time_over = t(e), 
                i.data.time_list[a].end_time_over = t(s), i.data.time_list[a].now_time = i.data.time_list[a].now_time + 1;
            }
            i.setData({
                time_list: i.data.time_list
            });
        }
        var i = this;
        a(), setInterval(function() {
            a();
        }, 1e3);
    },
    miaosha_next: function() {
        var t = this, a = t.data.time_list;
        a.forEach(function(t, i, e) {
            a[i].active = !1;
        }), t.setData({
            goods_list: null,
            ms_active: !0,
            time_list: a
        }), setTimeout(function() {
            t.setData({
                goods_list: t.data.next_list
            });
        }, 500);
    },
    topBarScrollCenter: function() {
        var t = this, a = 0;
        for (var i in t.data.time_list) if (t.data.time_list[i].active) {
            a = i;
            break;
        }
        t.setData({
            top_bar_scroll: a >= 2 ? a - 2 : 0
        });
    },
    topBarItemClick: function(t) {
        var a = this, i = t.currentTarget.dataset.index;
        for (var e in a.data.time_list) a.data.time_list[e].active = i == e;
        a.setData({
            time_list: a.data.time_list,
            loading_more: !1,
            page: 1,
            ms_active: !1
        }), a.topBarScrollCenter(), a.loadGoodsList(!1);
    },
    loadGoodsList: function(t) {
        var a = this, i = !1;
        for (var e in a.data.time_list) {
            if (a.data.time_list[e].active) {
                i = a.data.time_list[e].start_time;
                break;
            }
            a.data.time_list.length == parseInt(e) + 1 && 0 == i && (i = a.data.time_list[0].start_time, 
            a.data.time_list[0].active = !0);
        }
        t ? a.setData({
            loading_more: !0
        }) : a.setData({
            goods_list: null
        }), myVue.getApp.request({
            url: myVue.getApp.api.miaosha.goods_list,
            data: {
                time: i,
                page: a.data.page
            },
            success: function(i) {
                0 == i.code && (a.data.goods_list = t ? a.data.goods_list.concat(i.data.list) : i.data.list, 
                a.setData({
                    loading_more: !1,
                    goods_list: a.data.goods_list,
                    page: i.data.list && 0 != i.data.list.length ? a.data.page + 1 : -1
                }));
            }
        });
    },
		},
	}
</script>

<style scoped>

.top-bar {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    border-bottom: 1upx solid #eee;
}

.top-bar>scroll-view {
    overflow: auto!important;
}

.start-time-list {
    overflow-y: visible!important;
    padding-bottom: 20upx;
}

.start-time-item {
    background: #30353c;
    color: #bbb;
    font-weight: bold;
    width: 150upx;
    text-align: center;
    height: 120upx;
}

.start-time-item>view {
    width: 100%;
}

.start-time-item .start-time {
    text-align: center;
    line-height: 1;
}

.start-time-item .start-status {
    font-size: 9pt;
    line-height: 1;
    font-weight: normal;
    text-align: center;
}

.start-time-item.active {
    background: #ff4544;
    color: #fff;
    position: relative;
}

.start-time-item.active .start-time-item-icon {
    position: absolute;
    z-index: 999;
    bottom: -15upx;
    left: 50%;
    margin-left: -12upx;
    display: block;
    width: 0;
    height: 0;
    border: 20upx solid #ff4544;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-bottom-width: 0;
}

.start-time-item.active .start-time {
    font-size: 12pt;
}

.time-over-bar {
    background: #fff;
    margin-top: -20upx;
    height: 80upx;
    padding: 0 20upx;
    border-left: 6upx solid #ff4544;
}

.goods-list {
    padding-top: 220upx;
}

.goods-list .item {
    background: #fff;
    border-bottom: 1upx solid #eee;
}

.goods-list .cover-pic {
    width: 262upx;
    height: 262upx;
    display: block;
}

.goods-list .goods-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 16upx;
}

.goods-list .progress-bar {
    background: #ffb7b7;
    border-radius: 999upx;
    overflow: hidden;
    height: 24upx;
    margin-bottom: 12upx;
}

.goods-list .progress {
    background: #ff4544;
    border-radius: 999upx;
    height: 100%;
    width: 0%;
}

.goods-list .statue-text {
    font-size: 9pt;
    color: #888;
    margin-bottom: 28upx;
}

.goods-list .miaosha-price {
    color: #ff4544;
    font-size: 13pt;
    font-weight: bold;
    line-height: 1;
}

.goods-list .price {
    color: #888;
    text-decoration: line-through;
    font-size: 9pt;
    line-height: 1;
}

.goods-list .btn {
    font-size: 9pt;
    display: block;
    padding: 10upx 24upx;
    border: 1upx solid #ff4544;
    color: #ff4544;
    border-radius: 10upx;
}

.goods-list .btn.btn-buy {
    background: #ff4544;
    color: #fff;
}

.load-more-bar {
    text-align: center;
    visibility: hidden;
}

.load-more-bar.active {
    visibility: visible;
}

.load-more-bar image {
    width: 200upx;
    height: 100upx;
}
</style>
